<template>
  <div class="hand-container">
    <div
      class="container"
      v-for="(item, index) in props.header"
      :key="item.id"
      @click="switchCatalogue(index, item.id)"
      ref="nav"
    >
      <span>{{ item.title }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect } from "vue";
const props = defineProps({
  header: {
    type: Array,
    default: () => [],
  },
});

const nav = ref([])

onMounted(() => {
  watchEffect(() => {
    nav.value.forEach((it) => {
      it.classList.remove("select");
      it.classList.remove("right");
    });
    props.header.forEach((item, index) => {
      if (item.select) {
        nav.value[index].classList.add("select");
        nav.value[
          index + 1 > props.header.length - 1 ? 0 : index + 1
        ].classList.add("right");
      }
    });
  });
  
  
});
const emit = defineEmits(["change"]);
function switchCatalogue(i, id) {
  emit("change", id);
}
</script>

<style lang="less" scoped>
.hand-container {
  width: 80%;
  height: 100%;
  position: relative;
  margin: 0 auto;
  z-index: 99;
}
.container {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 18px;
  transition: all 0.2s linear;
  white-space: nowrap;
  cursor: pointer;
  &.select {
    font-size: 28px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &.right {
    left: 100%;
    transform: translate(-100%, -50%);
  }
}
</style>